<template>
  <div v-if="showBrowser" class="browser">
    <Draggable
      class="browser-container"
      :width="position.width"
      :height="position.height"
      :left="position.x"
      :top="position.y"
      @dragging-started="draggingStarted"
      @dragging-end="draggingEnd"
    >
      <template #head>
        <Head @fullscreen="fullscreen" @restore="restore"></Head>
      </template>
      <div class="container flex flex-col">
        <Toolbar></Toolbar>
        <KeepAlive>
          <template v-for="item in links" :key="item.id">
            <IframeVue
              v-show="item.id === currentLink.id"
              :src="item.src"
              :update="item.update"
            ></IframeVue>
          </template>
        </KeepAlive>
      </div>
    </Draggable>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import Draggable from '../components/draggable/Draggable.vue';
  import Toolbar from './toolbar/Toolbar.vue';
  import IframeVue from './iframe/Iframe.vue';
  import { Position, DomRect } from '../components/draggable/types';
  import Head from './head/Head.vue';
  import { currentLink, links, showBrowser } from './bus';
  import { preventDefault } from './iframe/bus';

  const config: Position & DomRect = {
    x: window.innerWidth / 2 - 400,
    y: window.innerHeight / 2 - 300,
    width: 1000,
    height: 700,
  };
  const position = ref<Position & DomRect>({
    ...config,
  });

  const draggingStarted = () => {
    preventDefault.value = true;
  };
  const draggingEnd = () => {
    preventDefault.value = false;
  };
  const fullscreen = () => {
    position.value.x = 0;
    position.value.y = 0;
    position.value.width = window.innerWidth;
    position.value.height = window.innerHeight;
  };
  const restore = () => {
    position.value = {
      ...config,
    };
  };

  const src = computed(() => {
    return currentLink.value.src;
  });
</script>

<style lang="scss" scoped>
  .browser {
    position: fixed;
    top: 0;
  }
  .browser-container {
    box-shadow: 0 0 25px #80808050;
    background-color: white;

    border-radius: 4px;
    .core-head {
      height: 36px;
      padding: 0 12px;
    }
    .container {
      height: calc(100% - 36px);
    }
  }
</style>
